<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>商品详细页面</title>
	<link rel="stylesheet" href="../frontDesk/css/base.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_common.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_header.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_list.css" type="text/css" />
    <link rel="stylesheet" href="../frontDesk/css/shop_goods.css" type="text/css" />
    <script type="text/javascript" src="../frontDesk/js/jquery.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/topNav.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/shop_goods.js" ></script>
</head>
<body>
	<!-- Header  -wll-2013/03/24 -->
	<div class="shop_hd">
		<!-- Header TopNav -->
		<div class="shop_hd_topNav">
			<div class="shop_hd_topNav_all">
				<!-- Header TopNav Left -->
				<div class="shop_hd_topNav_all_left">
					<p>您好，欢迎来到<b><a href="/">ShoopNC商城</a></b>[<a href="">登录</a>][<a href="">注册</a>]</p>
				</div>
				<!-- Header TopNav Left End -->

				<!-- Header TopNav Right -->
				<div class="shop_hd_topNav_all_right">
					<ul class="topNav_quick_menu">

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的商城<i></i></a>
								<div class="topNav_menu_bd" style="display:none;" >
						            <ul>
						              <li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li>
						              <li><a title="个人主页" target="_top" href="#">个人主页</a></li>
						              <li><a title="我的好友" target="_top" href="#">我的好友</a></li>
						            </ul>
						        </div>
							</div>
						</li>
                                                <li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">卖家中心<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">购物车<b>0</b>种商品<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
									<!--
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        	-->
						            <p>还没有商品，赶快去挑选！</p>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的收藏<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li>
						              <li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#">站内消息</a>
							</div>
						</li>

					</ul>
				</div>
				<!-- Header TopNav Right End -->
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<!-- Header TopNav End -->

	</div>
	<div class="clear"></div>
	<!-- 面包屑 注意首页没有 -->
	<div class="shop_hd_breadcrumb">
		<strong>当前位置：</strong>
		<span>
			<a href="">首页</a>&nbsp;›&nbsp;
			<a href="">商品详情</a>&nbsp;›
		</span>
	</div>
	<div class="clear"></div>
	<!-- 面包屑 End -->

	<!-- Header End -->
	
	<!-- Goods Body -->
	<div class="shop_goods_bd clear">

		<!-- 商品展示 -->
		<div class="shop_goods_show">
			<div class="shop_goods_show_left">
				<!-- 京东商品展示 -->
				<link rel="stylesheet" href="css/shop_goodPic.css" type="text/css" />
				<script type="text/javascript" src="js/shop_goodPic_base.js"></script>
				<script type="text/javascript" src="js/lib.js"></script>
				<script type="text/javascript" src="js/163css.js"></script>
				<div id="preview">
					<div class=jqzoom id="spec-n1" >
						<IMG height="350" src="../frontDesk/images/img04.jpg" jqimg="../frontDesk/images/img04.jpg" width="350">
					</div>
						<div id="spec-n5">
							<div class=control id="spec-left">
								<img src="../frontDesk/images/left.gif" />
							</div>
							<div id="spec-list">
								<ul id="ul-img" class="list-h">
									<li><img src="../frontDesk/images/img01.jpg"> </li>
								</ul>
							</div>
							<div class=control id="spec-right">
								<img src="../frontDesk/images/right.gif" />
							</div>
					    </div>
				</div>

					<SCRIPT type=text/javascript>
						$(function(){			
						   $(".jqzoom").jqueryzoom({
								xzoom:400,
								yzoom:400,
								offset:10,
								position:"right",
								preload:1,
								lens:1
							});
							$("#spec-list").jdMarquee({
								deriction:"left",
								width:350,
								height:56,
								step:2,
								speed:4,
								delay:10,
								control:true,
								_front:"#spec-right",
								_back:"#spec-left"
							});
							$("#spec-list img").bind("mouseover",function(){
								var src=$(this).attr("src");
								$("#spec-n1 img").eq(0).attr({
									src:src.replace("\/n5\/","\/n1\/"),
									jqimg:src.replace("\/n5\/","\/n0\/")
								});
								$(this).css({
									"border":"2px solid #ff6600",
									"padding":"1px"
								});
							}).bind("mouseout",function(){
								$(this).css({
									"border":"1px solid #ccc",
									"padding":"2px"
								});
							});				
						})
						</SCRIPT>
					<!-- 京东商品展示 End -->
			</div>
			<div class="shop_goods_show_right">
				<ul id="product-details">
				</ul>
			</div>
		</div>
		<!-- 商品展示 End -->

		<div class="clear mt15"></div>
		<!-- Goods Left -->
		<div class="shop_bd_list_left clearfix">
			<!-- 左边商品分类 -->
			<div class="shop_bd_list_bk clearfix">
				<div class="title">商品分类</div>
				<div class="contents clearfix">
					<dl class="shop_bd_list_type_links clearfix">
						<dt><strong>女装</strong></dt>
						<dd>
							<span><a href="">风衣</a></span>
							<span><a href="">长袖连衣裙</a></span>
							<span><a href="">毛呢连衣裙</a></span>
							<span><a href="">半身裙</a></span>
							<span><a href="">小脚裤</a></span>
							<span><a href="">加绒打底裤</a></span>
							<span><a href="">牛仔裤</a></span>
							<span><a href="">打底衫</a></span>
							<span><a href="">情侣装</a></span>
							<span><a href="">棉衣</a></span>
							<span><a href="">毛呢大衣</a></span>
							<span><a href="">毛呢短裤</a></span>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左边商品分类 End -->

			<!-- 热卖推荐商品 -->
			<!--<div class="shop_bd_list_bk clearfix">
				<div class="title">热卖推荐商品</div>
				<div class="contents clearfix">
					<ul class="clearfix">
						
						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

					</ul>
				</div>
			</div>-->
			<!-- 热卖推荐商品 -->
			<div class="clear"></div>

			<!-- 浏览过的商品 -->
			<!--<div class="shop_bd_list_bk clearfix">
				<div class="title">浏览过的商品</div>
				<div class="contents clearfix">
					<ul class="clearfix">
						
						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="../frontDesk/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

					</ul>
				</div>
			</div>-->
			<!-- 浏览过的商品 -->

		</div>
		<!-- Goods Left End -->

		<!-- 商品详情 -->
		<script type="text/javascript" src="js/shop_goods_tab.js"></script>
		<div class="shop_goods_bd_xiangqing clearfix">
			<div class="shop_goods_bd_xiangqing_tab">
				<ul>
					<li id="xiangqing_tab_1" onmouseover="shop_goods_easytabs('1', '1');" onfocus="shop_goods_easytabs('1', '1');" onclick="return false;"><a href=""><span>商品详情</span></a></li>
					<li id="xiangqing_tab_2" onmouseover="shop_goods_easytabs('1', '2');" onfocus="shop_goods_easytabs('1', '2');" onclick="return false;"><a href=""><span>商品评论</span></a></li>
					<li id="xiangqing_tab_3" onmouseover="shop_goods_easytabs('1', '3');" onfocus="shop_goods_easytabs('1', '3');" onclick="return false;"><a href=""><span>商品咨询</span></a></li>
				</ul>
			</div>
			<style type="text/css">
				.comment_list{width: 100%;height: auto;clear: both;margin-bottom: 20px;float: left;border-bottom: 1px dotted #cccccc;padding-bottom: 10px;}
				.comment_list .avatar{width: 50px;height: auto;margin-right: 10px;float: left;}
				.comment_list .avatar img{width: 50px;height: 50px;overflow: hidden;}
				.comment_list .avatar span{height: 24px;line-height: 24px;display: inline-block;}
				.comment_list_content{width: 700px;height: auto;float: right;}
				.comment_list_content .comment_list_content_l{width: 500px;float: left;}
				.comment_list_content_l p.tit{width: 100%;height: 24px;line-height: 24px;}
				.comment_list_content_l p.tit span{margin-right: 10px;}
				.comment_list_content_l .star i{width: 13px;height: 13px;display: inline-block;background: url(../frontDesk/images/star0.jpg);}
				.comment_list_content_l .star i.cur{background: url(../frontDesk/images/star1.jpg);}
				.comment_list_content_l p.con{line-height: 150%;}
				.comment_list_content .comment_list_content_r{width: 200px;float: right;text-align: right;}
				.comment_list_content_r a{height: 24px;line-height: 24px;padding: 0 8px;display: inline-block;border: 1px solid #dfdfdf;border-radius: 3px;margin-top: 30px;color: #333333;}
				.comment_list_content_r a:hover{color: #cc0000;text-decoration: none;}
				.comment_list_content_r a i{font-style: normal;padding: 0 5px;color: #cc0000;font-weight: bold;}
			</style>
			<div class="shop_goods_bd_xiangqing_content clearfix">
				<div id="xiangqing_content_1" class="xiangqing_contents clearfix">
					<p>商品详情----11111</p>
				</div>
				<div id="xiangqing_content_2" class="xiangqing_contents clearfix">
					<div class="comment_list">
						<textarea rows="8" cols="80" id="comment-content" placeholder="看官，留下你的评论吧...."></textarea><button onclick="addComment()">发布评论</button>
					</div>
					<!--一条评论 开始-->

					<!--一条评论 结束-->

				</div>

				<div id="xiangqing_content_3" class="xiangqing_contents clearfix">
					<p>商品自诩---3333</p>
				</div>
			</div>
		</div>
		<!-- 商品详情 End -->

	</div>
	<!-- Goods Body End -->

	<!-- Footer - wll - 2013/3/24 -->
	<div class="clear"></div>
	<div class="shop_footer">
            <div class="shop_footer_link">
                <p>
                    <a href="">首页</a>|
                    <a href="">招聘英才</a>|
                    <a href="">广告合作</a>|
                    <a href="">关于ShopCZ</a>|
                    <a href="">关于我们</a>
                </p>
            </div>
            <div class="shop_footer_copy">
                <p>Copyright 2004-2013 itcast Inc.,All rights reserved.</p>
            </div>
        </div>
	<!-- Footer End -->

</body>
<script type="text/javascript">

	var productId = "";
	// 页面加载完成
	$(function () {
		// 获取商品信息数据
		$.get("/user_product/product_details.shtml", function (json) {
			if(json.code == 200){
				productId = json.data.id;
				// 修改大图
				$("#spec-n1").empty();
				var img = '<IMG height="350" src="..'+json.data.imgUrl+'" jqimg="..'+json.data.imgUrl+'" width="350">';
				$("#spec-n1").append(img);
				// 修改小图
				$("#ul-img").empty();
				var liImg = '<li><img src="..'+json.data.imgUrl+'"> </li>';
				$("#ul-img").append(liImg);
				// 清空内容
				$("#product-details").empty();
				// 修改数据
				var html = '<li>' +
						'<strong style="font-size:14px; font-weight:bold;">'+json.data.description+'</strong>' +
						'</li>' +
						'<li>' +
						'<label>价格：</label>' +
						'<span><strong>'+json.data.price+'</strong>元</span>' +
						'</li>' +
						'<li>' +
						'<label>运费：</label>' +
						'<span>卖家承担运费</span>' +
						'</li>' +
						'<li>' +
						'<label>累计售出：</label>' +
						'<span>99件</span>' +
						'</li>' +
						'<li>' +
						'<label>评价：</label>' +
						'<span id="comment-length">0条评论</span>' +
						'</li>' +
						'<li class="goods_num">' +
						'<label>购买数量：</label>' +
						'<span><a class="good_num_jian" onclick="add()" href="javascript:void(0);"></a><input type="text" value="1" readonly="readonly" id="good_nums" class="good_nums" /><a href="javascript:void(0);" onclick="reduce()" class="good_num_jia"></a>(当前库存'+json.data.repertory+'件)</span>' +
						'</li>' +
						' <li class="goods_num">' +
						'<label>商品总价：</label>' +
						'&yen;<span id="good_count">'+json.data.price+'</span>' +
						'</li>' +
						'<li style="padding:20px 0;">' +
						'<label>&nbsp;</label>' +
						'<span><a href="javascript:void(0);" onclick="addCart('+json.data.id+')" class="goods_sub goods_sub_gou" >加入购物车</a></span>' +
						'<span><a href="javascript:void(0);" onclick="collect('+json.data.id+')" style="font-size: 16px" >收藏该商品</a></span></li>';
				$("#product-details").append(html);

				// 商品详情
				$("#xiangqing_content_1").empty();
				var p = '<p>'+json.data.description+'</p>';
				$("#xiangqing_content_1").append(p);

				commectPage(json.data.id)
			}else{
				location.href="/frontDesk/error.html";
			}
		}, "json");

	});

	// 加载商品的评论数据
	function commectPage(productId) {
		$.post("/comment/find_comment_by_product_id.shtml", {productId: productId}, function (msg) {
			console.log(msg);
			if(msg.code == 200){
				for(var i=0; i<msg.data.length; i++){
					var div = '<div class="comment_list"><div class="avatar"><img src="../frontDesk/images/user.gif">' +
							'<span>'+msg.data[i].username+'</span></div><div class="comment_list_content"><div class="comment_list_content_l">' +
							'<p class="tit"><span class="time">'+(msg.data[i].createdTime).substring(0,10)+'</span><span class="star"><i class="cur"></i>' +
							'<i></i><i></i><i></i><i></i></span></p>' +
							'<p class="con">'+msg.data[i].commentContent+'</p></div><div class="comment_list_content_r">' +
							'<a href="javascript:">有用 (<i>1</i>)</a><a href="javascript:">没用 (<i>2</i>)</a>' +
							'</div></div></div>';
					$("#xiangqing_content_2").append(div);
				}
				$("#comment-length").text(msg.data.length+"条评论");
			}
		}, "json");
	}


	// 发布评论
	function addComment(){
		// 获取评论内容
		var commentVal = $("#comment-content").val();
		$.post("/comment/user_comment_product.shtml", {productId: productId, commentContent: commentVal}, function (json) {
			if(json.code == 200){
				commectPage(productId);
				location.reload();
			}else{
				// 每有评论数据
			}
		}, "json");

	}

	// 点击收藏
	function collect(id) {
		$.get("/collect/collect_product.shtml", {productId: id}, function (json) {
			console.log(json);
			if(json.code == 200){
				alert("收藏成功");
			}else{
				console.log(json.message);
				location.href="/frontDesk/login.html";
			}
		},  "json");
	}

	// 点击加入购物车
	function addCart(id) {
		var num = $("#good_nums").val();
		$.post("/cart/add_cart.shtml", {productId: id, number: num}, function (json) {
			console.log(json);
			if(json.code == 200){
				alert("添加成功，快去首页我的购物车看看吧");
			}else{
				console.log(json.message);
				location.href="/frontDesk/login.html";
			}
		},  "json");
	}



	function add(){
		var num = $("#good_nums").val();
		num = parseInt(num);
		num = num-1;
		if(num<=1){
			num = 1;
		}
		$("#good_nums").val(num);
	}

	function reduce(){
		var num = $("#good_nums").val();
		num = parseInt(num);
		num = num+1;
		$("#good_nums").val(num);
	}

</script>
</html>